<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>节流：频繁触发的事件改成按固定频率触发</h1>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<p>5</p>
		<p>6</p>
		<p>7</p>
		<p>8</p>
		<p>9</p>
		<p>10</p>
		<p>11</p>
		<p>12</p>
		<p>13</p>
		<p>14</p>
		<p>15</p>
		<p>16</p>
		<p>17</p>
		<p>18</p>
		<p>19</p>
		<p>20</p>
		<p>21</p>
		<p>22</p>
		<p>23</p>
		<p>24</p>
		<p>25</p>
		<p>26</p>
		<p>27</p>
		<p>28</p>
		<p>29</p>
		<p>30</p>
		<p>31</p>
		<p>32</p>
		<p>33</p>
		<p>34</p>
		<p>35</p>
		<p>36</p>
		<p>37</p>
		<p>38</p>
		<p>39</p>
		<p>40</p>
		<p>41</p>
		<p>42</p>
		<p>43</p>
		<p>44</p>
		<p>45</p>
		<p>46</p>
		<p>47</p>
		<p>48</p>
		<p>49</p>
		<p>50</p>
		<p>51</p>
		<p>52</p>
		<p>53</p>
		<p>54</p>
		<p>55</p>
		<p>56</p>
		<p>57</p>
		<p>58</p>
		<p>59</p>
		<p>60</p>
		<p>61</p>
		<p>62</p>
		<p>63</p>
		<p>64</p>
		<p>65</p>
		<p>66</p>
		<p>67</p>
		<p>68</p>
		<p>69</p>
		<p>70</p>
		<p>71</p>
		<p>72</p>
		<p>73</p>
		<p>74</p>
		<p>75</p>
		<p>76</p>
		<p>77</p>
		<p>78</p>
		<p>79</p>
		<p>80</p>
		<p>81</p>
		<p>82</p>
		<p>83</p>
		<p>84</p>
		<p>85</p>
		<p>86</p>
		<p>87</p>
		<p>88</p>
		<p>89</p>
		<p>90</p>
		<p>91</p>
		<p>92</p>
		<p>93</p>
		<p>94</p>
		<p>95</p>
		<p>96</p>
		<p>97</p>
		<p>98</p>
		<p>99</p>
		<p>100</p>
		<script>
			/* // 定义式定时器
			let timer = null;
			window.addEventListener("scroll",e=>{	
				// 如果有定时器就返回
				if(timer){return}
				// 如果没有就开启定时器
				timer = setTimeout(()=>{
					console.log(Date.now())
					console.log(document.documentElement.scrollTop,"滚");	
					// 执行完毕清除定时器
					timer = null;
				},500)
			
			}) */
			// 定义一个节流函数
			function throttle(callback,delay){
				// 定义一个定时器
				let timer = null;
				// 返回一个函数
				return function(){
					// 如果有定时器就直接返回
					if(timer){return}
					// 如果没有 开启定时器
					timer = setTimeout(()=>{
						// 执行callback 传入this，和参数
						console.log(arguments,"return 返回函数的参数也就是fn的参数")
						callback.apply(this,arguments);
						// 清除定时器 设置为null
						timer = null;
					},delay)
				}
			}
			// 通过throttle创建一个函数
			// var fn = throttle(function(e){
			// 	console.log(e,this,document.documentElement.scrollTop);
			// },500)
			// window.addEventListener("scroll",fn);
			
			// window.addEventListener("scroll",throttle(function(e){
			// 	console.log(e,this,document.documentElement.scrollTop);
			// },500))
			// 要执行的回调函数
			var callback = function(e){
					console.log(e,document.documentElement.scrollTop);
			}
			// 通过throttle结合callback 返回一个函数
			var fn = throttle(callback,500);
			// 监听scroll执行 fn
			window.addEventListener("scroll",fn);
			
			
			
		</script>
	</body>
</html>